<template>
  <div class="art-list-wrap" ref="listWrap" @scroll="onScroll">
    <!-- 
        load事件绑定的onLoad方法，是专门用来加载数据的方法
        finished是用来控制是否加载完成的变量
            当finished为false就代表还没加载完，还可以继续加载
            当finished为true就代表加载完了，不会继续加载

        v-model绑定的loading
            是用来标记本次是否正在加载的状态
            如果为true，代表本次正在加载（所以它一直会转圈圈）

            特点：当onLoad被调用的时候会自动把 loading改成 true

        onLoad是用来加载数据的方法，当onload被调用就意味着当前正在加载数据
        数据加载可能要耗时，既然要耗时，所以要显示转圈圈告诉用户正在加载，所以会自动把
        loading这个值改成true

        但是就算耗时，本次请求数据早晚也会请求完的，
        那请求完了就不要转圈圈了，所以需要把loading设置为false


        onLoad会什么时候被调用？？
            默认情况下，当列表没有铺满这个页面时会自动调用
            但是，如果finished为true，就意味着你告诉它数据全部加载完了，所以它也不会再调用了
            注意：loading为true，也不会调用，因为loading代表正在加载，他觉得还在加载中，没必要调用一次加载新的



        总结：
            onLoad不需要我们自己手动调用，因为他会发现没铺满自动去调用请求新的数据
            但是如果这一次数据加载完了，一定要把loading改成false,否则加载中的状态一直再显示
            如果你判断数据全部加载完了，就记得把finished改成true,那么他以后就不会再继续加载
     -->
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 使用插槽：单标签改成双标签 -->
        <van-cell
          v-for="item in list"
          @click="
            $router.push({ path: '/article', query: { id: item.art_id } })
          "
          :key="item.art_id"
          :title="item.title"
        >
          <template #label>
            <!-- 图片区域 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(value, index) in item.cover.images"
                :key="index"
              >
                <van-image :src="value" />
              </van-grid-item>
            </van-grid>

            <!-- 作者信息区域 -->
            <div class="info">
              <span>{{ item.aut_name }}</span>
              <span style="margin: 0 10px">{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relvTime }}</span>
              <van-icon name="cross" style="float: right" />
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleListAPI } from "@/api";
export default {
  name: "articleList",
  props: ["channel_id"],
  data() {
    return {
      pullLoading: false,
      // 保存数据的数组
      list: [],
      loading: false,
      finished: false,

      // 查新闻的时间戳，默认是当前时间戳
      timestamp: Date.now(),

      // 用来记录滚动条滚出去的距离
      scrollTop: 0
    };
  },
  methods: {
    // 当你下拉会调用的方法
    async onRefresh() {
      // 去请求最新的新闻
      let res = await articleListAPI({
        channel_id: this.channel_id,
        // 因为下拉永远是去请求最新的新闻，所以这里写死Date.now即可
        timestamp: Date.now(),
      });

      // 把上一段时间段里的新闻时间戳赋值给timestamp
      this.timestamp = res.data.data.pre_timestamp;

      // 注意：下拉刷新是为了替换最新的新闻，所以直接重新赋值即可，不要用push
      this.list = res.data.data.results;

      // 把本次下拉状态改成false
      this.pullLoading = false;
    },
    // 会被自动调用
    async onLoad() {
      // 发请求获取数据
      let res = await articleListAPI({
        // 频道id
        channel_id: this.channel_id,
        // 要查最新新闻，那就传当前时间戳
        timestamp: this.timestamp,
      });

      // 如果加载完数据了 pre_timestamp会变null
      // console.log(res.data.data.pre_timestamp)

      // 把上一段时间段里的新闻时间戳赋值给timestamp
      this.timestamp = res.data.data.pre_timestamp;

      // 因为用的是赋值就会导致，每次都是重新覆盖
      // 那么页面肯定铺不满就循环调用了
      // this.list = res.data.data.results

      // 应该用push,因为push才是添加不覆盖
      // 注意：添加时不能添加整个数组，而应该把数组里的每一项一一铺开添加
      this.list.push(...res.data.data.results);

      // 本次加载完毕，就应该把loading改成false，代表本次加载完了，让加载中状态消失
      // 这样才可以继续下次加载
      this.loading = false;

      // 判断数据是否加载完毕，加载完毕把finished改成true
      if (this.timestamp == null) {
        this.finished = true;
      }
    },


    // 滚动触发的事件
    onScroll () {
      
      // 一边滚动一边记录当前滚出去的距离
      // console.log( this.$refs.listWrap.scrollTop )
      this.scrollTop = this.$refs.listWrap.scrollTop 
    }
  },

  activated() {

    // 当我重新被激活时，就把我们记录的滚动条位置重新设置给滚动条
    this.$refs.listWrap.scrollTop = this.scrollTop
  },

  deactivated() {
    //  离开时记录滚动条的位置
    //  当这个钩子调用的时候证明界面上已经完全看不到这个组件了
    //  看不到这个组件就意味着它也没有滚动条了，所以获取的滚出去距离在这里永远都是0
    // console.log("失活了", this.$refs.listWrap.scrollTop);
  },
};
</script>

<style scoped lang="less">
.art-list-wrap {
  // 弹性高度
  position: fixed;
  // 定位后，div就不会宽度铺满
  // 所以要自己指定好宽度
  // viewport width（视口宽度）
  width: 100vw;
  left: 0;
  top: 90px;
  bottom: 50px;
  overflow: auto;
}
</style>